<!--
 * @Author: 极客James
 * @Motto: 求知若渴,虚心若愚
 * @Github: https://github.com/Geek-James/ddBuy
 * @掘金: https://juejin.im/user/5c4ebc72e51d4511dc7306ce
 * @LastEditTime: 2019-11-07 09:18:07
 * @Description: 登录模块
 * @FilePath: /ddBuy/src/views/login/Login.vue
 -->
<template>
  <div id="login">
    <div class="loginBox" @click="changeImage(3)">
      <div class="auth-form">
        <div class="panfish">
          <img class="bg-img" style="width: 100px" :src="imageURL" alt="" />
        </div>
        <!-- 关闭按钮 -->
        <van-icon name="close" style="z-index: 10" size="30" class="closeButton" @click="close" />
        <van-tabs v-model="active" animated>
          <van-tab title="登录">
            <!-- 账号密码登录 -->
            <van-cell-group>
              <van-field v-model="username" required clearable maxlength="11" label="账号" placeholder="请输入手机号" :error-message="phoneNumberRight ? '' : '手机号格式不正确'" />
              <van-field v-model="password" required clearable maxlength="11" label="密码" placeholder="请输入密码" />
            </van-cell-group>
            <div style="padding: 2px">
              <van-button type="info" size="large" style="margin-top: 1rem" @click="login">登录</van-button>
              <div style="margin:15px 0; font-size: 14px; text-align:right" @click="forgotPassword">忘记密码</div>
            </div>
          </van-tab>
          <!-- 注册 -->
          <van-tab title="注册">
            <van-cell-group>
              <van-field v-model="register_userName" clearable placeholder="请输入手机号" :error-message="checkPhone ? '' : '手机号格式不正确'" required />
              <van-field center clearable required maxlength="6" v-model="smsCaptchaResult" placeholder="短信验证码">
                <van-button slot="button" size="small" type="primary" v-if="!countDown" :disabled="captchaDisable" @click="send">发送验证码</van-button>
                <van-button :disabled="true" slot="button" size="small" type="primary" v-else>已发送{{ countDown}}s</van-button>
              </van-field>
              <van-field v-model="register_pwd" type="password" placeholder="请输入密码(5-20位)" required />
              <van-field v-model="conpassword" type="password" placeholder="请输入密码确认密码(5-20位)" required />
              <vue-drag-verify style="margin: 15px 0;" ref="slideRef" text="向右滑动" successText="成功" :height="28" :width="260" :circle="false" @passcallback="onSuccess"></vue-drag-verify>
            </van-cell-group>
            <van-button type="info" :disabled="!isSuccess" size="large" style="margin-top: 1rem" @click="register">注册</van-button>
          </van-tab>
        </van-tabs>
        <!-- 底部声明 -->
        <p class="agreement" style="font-size: 12px; line-height: 16px">
          温馨提示：<br />登录成功后代表同意<a @click.stop="agreement(0)" @click="() => showRecharge = true" class="agreement-box">用户协议</a>
        </p>
      </div>
    </div>
    <van-action-sheet v-model="showRecharge" title="用户注册协议" style="height: 800px">
      <div style="padding: 16px; font-size: 12px; line-height: 18px">
        尊敬的客户您好，欢迎您访问深汇保网站。在您完成注册之前，请您务必认真阅读和理解《新用户注册协议》（以下简称：协议）中所有的条款。您须完全同意协议中所有的条款，才可以注册成为本网站的会员，使用里面的服务。您在网站的注册和操作均将被视为是您对协议所有条款及内容的自愿接受。
        <div style="font-size: 14px; font-weight: bold; margin: 12px 0">
          第一条 声明
        </div>
        （一）网站内在线产品的所有权归深汇保所有。
        （二）您在网站进行注册时，一旦注册成功，即表示为您已自愿接受协议中所有的条款和内容。
        （三）协议条款的效力范围仅限于本网站，您在网站的行为均受协议的约束。
        （四）您使用网站服务的行为，即被视为您已知悉本网站的相关公告并同意。
        （五）本网站有权在未提前通知您的情况下修改协议的条款，您每次进入网站在使用服务前，都应先查阅一遍协议。
        （六）本网站有权在未提前通知您的情况下修改、暂停网站部分或全部的服务，且不承担由此产生来自您和第三方的任何责任。
        （七）本网站提供免费注册服务，您的注册均是自愿行为，注册成功后，您可以得到网站更加完善的服务。
        （八）您注册成功后，账户和密码请妥善保密保管，如因丢失账户和密码造成的相关账户信息丢失，本网站不承担除责任。
        <div style="font-size: 14px; font-weight: bold; margin: 12px 0">
          第二条 用户管理
        </div>
        （一）您在本网站的所有行为都须符合中国的法律法规，您不得利用本网站提供的服务制作、复制、发布、传播以下信息：
        1、反对宪法基本原则的；
        2、危害国家安全、泄露国家秘密、颠覆国家政权、破坏国家统一的；
        3、损害国家荣誉和利益的； 4、煽动民族仇恨、民族歧视、破坏民族团结的；
        5、破坏国家宗教政策，宣扬邪教和封建迷信的；
        6、散布谣言、扰乱社会秩序、破坏社会稳定的；
        7、散布淫秽、色情、赌博、暴力、凶杀、恐怖内容或者教唆犯罪的；
        8、侮辱或者诽谤他人，侵害他人合法权益的；
        9、以及法律、法规禁止的其他内容；
        （二）您在本网站的行为，还必须符合其它国家和地区的法律规定以及国际法的有关规定。
        （三）不得利用本网站从事以下活动：
        1、未经允许，进入他人计算机信息网络或者使用他人计算机信息网络的资源；
        2、未经允许，对他人计算机信息网络的功能进行删除、修改或增加；
        3、未经允许，对他人计算机信息网络中存储、处理或者传输的数据和应用程序进行删除、修改或者增加；
        4、制作、故意传播计算机病毒等破坏性程序的；
        5、其他危害计算机信息网络安全的行为； （四）遵守本网站其他规定和程序：
        1、您对自己在本网站中的行为和操作承担全部责任；
        2、您承担责任的形式包括但不仅限于，对受到侵害者进行赔偿、在本网站首先承担了因您的行为导致的行政处罚或侵权损害赔偿责任后，您应给予本网站的等额赔偿；
        3、如果本网站发现您传输的信息含有本协议第二条所列内容之一的 ，本网站有权在不通知您的情况下采取包括但不仅限于向国家有关机关报告、保存有关记录、删除该内容及链接地址、暂停您账号的操作权限、停止向您提供服务等措施；
        <div style="font-size: 14px; font-weight: bold; margin: 12px 0">
          第三条 注册后享有权利和义务
        </div>
        （一）同意遵守包括但不仅限于《中华人民共和国保守国家秘密法》、《中华人民共和国计算机信息系统安全保护条例》、《计算机软件保护条例》、《互联网电子公告服务管理规定》、《互联网信息服务管理办法》等在内的法律、法规。
        （二）您注册时有义务提供真实的手机号码。
        （三）您成为注册会员须妥善保管用户名和密码，用户登录后进行的一切活动均视为是您本人的行为和意愿，您负全部责任。
        （四）您在使用本网站服务时，同意且接受本网站提供的各类信息服务。
        （五）您使用本网站时，禁止有以下行为：
        1、上载、张贴传送含有违反国家法律、法规的信息或资料，这些资料包括但不仅限于资讯、资料、文字、软件、音乐、照片、图形、等（下同）；
        2、散布淫秽、色情、赌博、暴力、凶杀、恐怖或者教唆犯罪的资料；
        3、冒充任何个人或机构，或以虚伪不实的方式误导他人以为其与任何人或任何机构有关；
        <div style="font-size: 14px; font-weight: bold; margin: 12px 0">
          第四条 用户隐私
        </div>
        我们承诺，对您个人的信息和隐私的安全承担保密义务。未经您授权或同意，本网站不会将您的个人资料信息泄露给第三方，但以下情况除外，且本网站不承担任何责任：
        （一）政府单位按照中华人民共和国的法律、行政法规、部门规章、司法解释等规范性法律文件（统称“法律法规”），要求本网站提供的；
        （二）由于您将用户和密码告知或泄露给他人，由此导致的个人资料泄露；
        （三）包括但不仅限于黑客攻击、计算机病毒侵入或发作、政府管制等不可抗力而造成的用户个人资料泄露、丢失、被盗用或被篡改等；
        （四）您通过本网站链接其他网站造成的个人资料泄露以及由此导致的任何法律争议和后果；
        （五）为免除他人正在遭受威胁到其生命、身体或财产等方面的危险，所采取的措施；
        （六）本网站会与其他网站链接，但不对其他网站的隐私政策及内容负责；
        （七）此外，您若发现有任何非法使用您的用户账号或安全漏洞的情况，应立即通告本网站；
        （八）由于您自身的疏忽、大意等过错所导致的；
        （九）您在本网站的有关记录有可能成为您违反法律法规和本协议的证据；
        <div style="font-size: 14px; font-weight: bold; margin: 12px 0">
          第五条 知识产权
        </div>
        本网站所有的域名、商号、商标、文字、视像及声音内容、图形及图像均受有关所有权和知识产权法律的保护，未经本网站事先以书面明确允许，任何个人或单位，均不得进行复制和使用。
        第六条 法律适用
        （一）协议由本网站的所有人负责修订，并通过本网站公布，您的注册行为即被视为您自愿接受协议的全部条款，受其约束。
        （二）协议的生效、履行、解释及争议的解决均适用中华人民共和国法律。
        （三）您使用网站提供的服务如产生争议，原则上双方协商解决，协商不成可向本网站所有人所在的仲裁机构、人民法院进行调解或提起诉讼。
        （四）协议的条款如与法律相抵触，本网站可进行重新解析，而其他条款则保持对您产生法律效力和约束。
      </div>
    </van-action-sheet>
  </div>
</template>

<script type="text/javascript">
// import md5 from 'js-md5'
// 引入Vant的组件
// 引入API调用接口
// import { getPhoneCaptcha, phoneCaptchaLogin, pwdLogin } from '../../serve/api/index.js'
export default {
  data() {
    return {
      isSuccess: false,
      smsUuid: "",
      uuid: "",
      codeUrl: "",
      showRecharge: false,
      countDown: 0, // 倒计时
      active: 0,
      password: "", // 用户密码
      username: "", // 手机号码

      register_userName: "", // 注册用户名
      register_pwd: "", // 注册密码
      conpassword: "", // 确认密码

      // isShowSMSLogin: true, // 是否短信登录
      switchLoginMsg: "账号密码登录",
      imageURL: require("./../images/login/normal.png"),
      smsCaptchaResult: "",
      userInfo: null,
    };
  },
  computed: {
    // 1.手机号码验证
    phoneNumberRight() {
      // 1.1 当输入的手机号大于10位进行验证
      if (this.username.length > 10) {
        return /^1[3-9]\d{9}$/.test(this.username);
      } else {
        return true;
      }
    },
    checkPhone() {
      // 1.1 当输入的手机号大于10位进行验证
      if (this.register_userName.length > 10) {
        return /^1[3-9]\d{9}$/.test(this.register_userName);
      } else {
        return true;
      }
    },
    // 2.发送验证码按钮显示
    captchaDisable() {
      if (this.register_userName.length > 10 && this.checkPhone) {
        return false;
      } else {
        return true;
      }
    },
  },
  methods: {
    onSuccess() {
      this.isSuccess = true;
    },
    forgotPassword() {
      if (this.username.length < 1) {
        this.$toast({
          message: "请输入账号",
          duration: 800,
        });
        return;
      }
      // 5.1.1 验证手机号
      if (!this.phoneNumberRight || this.username.length < 10) {
        this.$toast({
          message: "请输入正确的手机号",
          duration: 800,
        });
        return;
      }
      localStorage.setItem("username", this.hideNumber(this.username));
      localStorage.setItem("phoneNumber", this.username);
      this.$router.push("/forgotPassword");
    },
    // 1.账号密码登录及短信验证码切换
    // switchLogin() {
    //   this.isShowSMSLogin = !this.isShowSMSLogin;
    // },
    // 2.切换萌猫图片
    changeImage(index) {
      if (index == 0) {
        this.imageURL = require("@/images/login/greeting.png");
      } else if (index == 1) {
        this.imageURL = require("@/images/login/blindfold.png");
      } else {
        this.imageURL = require("@/images/login/normal.png");
      }
    },
    send() {
      if (this.register_userName.length < 1) {
        this.$toast({
          message: "请输入手机号",
          duration: 800,
        });
        return;
      }
      // 5.1.1 验证手机号
      if (!this.checkPhone || this.register_userName.length < 10) {
        this.$toast({
          message: "请输入正确的手机号",
          duration: 800,
        });
        return;
      }
      this.$get("/customer/checkRegisterPhone", {
        phone: this.register_userName,
      }).then((res) => {
        if (res && res.code * 1 === 200) {
          this.sendVerifyCode();
        } else {
          this.$toast({
            message: "该手机号已被注册",
            duration: 800,
          });
        }
      });
    },
    // 4.获取手机验证码
    async sendVerifyCode() {
      const params = {
        phone: this.register_userName,
        uuid: this.uuid,
      };
      // 4.2 获取短信验证码
      this.$post("/customer/registerOfSms", params)
        .then((res) => {
          if (res && res.code * 1 === 200) {
            this.smsUuid = res.data;
            this.$toast({
              message: "短信发送成功",
              duration: 800,
            });
            this.countDown = 60;
            this.timeIntervalID = setInterval(() => {
              this.countDown--;
              // 4.1 如果减到0 则清除定时器
              if (this.countDown == 0) {
                clearInterval(this.timeIntervalID);
              }
            }, 1000);
          } else {
            //
          }
        })
        .catch(() => {
          //
        });
    },
    // 5.登录
    async login() {
      if (this.username.length < 1) {
        this.$toast({
          message: "请输入账号",
          duration: 800,
        });
        return;
      } else if (this.password.length < 1) {
        this.$toast({
          message: "密码不能为空",
          duration: 800,
        });
        return;
      }
      // 5.1.1 验证手机号
      if (!this.phoneNumberRight || this.username.length < 10) {
        this.$toast({
          message: "请输入正确的手机号",
          duration: 800,
        });
        return;
      }
      const params = {
        username: this.username,
        password: this.password,
      };
      this.$post("/customer/login", params).then((res) => {
        this.syncuserInfo(res.data);
        this.$router.push("/");
      });
    },

    // 6.注册
    async register() {
      if (this.register_userName.length < 1) {
        this.$toast({
          message: "请输入手机号",
          duration: 800,
        });
        return;
      }
      // 5.1.1 验证手机号
      if (!this.checkPhone || this.register_userName.length < 10) {
        this.$toast({
          message: "请输入正确的手机号",
          duration: 800,
        });
        return;
      }

      if (this.smsCaptchaResult.length < 1) {
        this.$toast({
          message: "请输入短信验证码",
          duration: 800,
        });
        return;
      }
      if (
        this.register_pwd.length < 5 ||
        this.register_pwd.length > 21 ||
        this.conpassword.length < 5 ||
        this.conpassword.length > 20
      ) {
        this.$toast({
          message: "密码为5-20位字符",
          duration: 800,
        });
        return;
      }
      if (this.register_pwd !== this.conpassword) {
        this.$toast({
          message: "两次输入的密码不一致",
          duration: 800,
        });
        return;
      }
      // 6.1 请求后台登录接口
      const params = {
        username: this.register_userName,
        password: this.register_pwd,
        code: this.smsCaptchaResult,
        conpassword: this.conpassword,
        uuid: this.smsUuid,
      };
      this.$post("/customer/register", params).then((res) => {
        if (res && res.code * 1 === 200) {
          this.$toast({
            message: "注册成功",
            duration: 800,
          });
          this.active = 0;
        }
      });
    },
    hideNumber(number) {
      return number.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2");
    },
    syncuserInfo(token) {
      localStorage.setItem("username", this.hideNumber(this.username));
      localStorage.setItem("token", token);
    },

    // 8.关闭
    close() {
      this.$router.back();
    },
  },
  mounted() {},
};
</script>
<style lang="less" scoped>
#login {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("../images/login/back2.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-attachment: fixed;

  .loginBox {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    opacity: 0.95;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 500;

    .auth-form {
      position: relative;
      padding: 2rem;
      // width: 26.5rem;
      max-width: 90%;
      font-size: 16px;
      background-color: #fff;
      border-radius: 8px;
      box-sizing: border-box;
    }

    .bg-img {
      position: absolute;
      top: 1rem;
      left: 50%;
      transform: translate(-50%, -70%);
      z-index: 1;

      @media screen and (max-width: 320px) {
        top: 0.5rem;
        transform: translate(-50%, -40%);
        width: 5rem;
      }
    }

    .closeButton {
      position: absolute;
      right: 1rem;
      top: 0.4rem;
    }

    .verificationImage {
      position: absolute;
      right: 0;
      width: 8rem;
      height: 3rem;
      margin-left: 3rem;
    }

    .switchLogin {
      margin-top: 1rem;
      font-size: 0.78rem;
    }
  }
}

.title {
  padding: 0.5rem;
  font-size: 0.5rem;
  color: grey;
}

.agreement {
  // margin-top: 1.667rem
  line-height: 1rem;
  color: #767676;

  .agreement-box {
    color: blue;
  }
}

.login-code {
  img {
    cursor: pointer;
    vertical-align: middle;
  }
}
</style>
